<template>
  <div>
  <el-card>
    <!-- 搜索框部分 -->
    <el-row :gutter="40">
      <el-col :span="16">
        <el-input
          v-model="search"
          clearable
          class="searchinput"
          prefix-icon="el-icon-search"
          placeholder="请输入要搜索的内容"
          @change="searchshow">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" icon="el-icon-plus" @click="addshow()">添加剧目</el-button>
      </el-col>
    </el-row>
    <!-- 剧目信息展示表格 -->
    <el-table
      :data="paginationshowinfo"
      style="width: 99.9%"
      class="showtable"
      v-loading.lock="loadingMask"
      stripe>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        >
      </el-table-column>
      <el-table-column
        prop="showName"
        label="演出名称"
        min-width="200"
        show-overflow-tooltip
        >
      </el-table-column>
      <el-table-column
        prop="date"
        label="演出时间"
        min-width="100"
        >
        <!-- 这里我们把演出时间按照每行一个日期的形式显示出来 -->
        <template slot-scope="{row}">
          <div v-if="Array.isArray(row.date)">
            <p v-for="(day, index) in row.date" :key="index">{{day}}</p>
          </div>
          <p v-else>{{row.date}}</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="是否演出"
        width="90"
        >
        <!-- 这里我们把是否演出过了按照tag形式显示出来 -->
        <template slot-scope="{row}">
          <el-tag :type="markarr[showmark(row.date).mark]">{{showmark(row.date).text}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="演出类型"
        >
      </el-table-column>
      <el-table-column
        prop="price"
        label="票价"
        >
      </el-table-column>
      <el-table-column
        prop="theaterName"
        label="演出剧院"
        width="150"
        >
      </el-table-column>
      <el-table-column
        prop="hall"
        label="所在演出厅"
        width="180"
        >
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="200">
        <template slot-scope="scope">
          <el-button type="Info" @click="displayshowinfo(scope.row)">详情</el-button>
          <el-button type="danger" @click="deleteshow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页栏部分 -->
     <el-pagination
      @size-change="pageSizeChange"
      @current-change="currentPageChange"
      :current-page="currentPage"
      :page-sizes="[10,15,20,25,30]"
      :page-size="currentpagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="showlength">
    </el-pagination>
  </el-card>
  <!-- 添加剧目对话框 -->
  <!-- 添加剧目需要添加剧目名、演出时间、演出地点（演出剧院和演出厅）、演出类型、座位图、价格等级、演出图片 -->
  <addshowdialog
    :addShowVisible.sync="addShowVisible"
    @closeAddShowDialog="closeAddShowDialog()"
    @showchanged="showchanged()"></addshowdialog>
  <!-- 剧目详情对话框 -->
  <displayshowinfo :showInfoVisible="showInfoVisible" :currentshowinfo="currentshowinfo" @closeShowInfoDialog="closeShowInfoDialog()"></displayshowinfo>
  </div>
</template>

<script>
// 导入子组件
import addshowdialog from './components/addshowdialog'
import displayshowinfo from './components/displayshowinfo'
// 导入网络请求
import { getshowinfo, postsearchshow } from '../../network/showManage'
export default {
  name: 'showmanage',
  components: { addshowdialog, displayshowinfo },
  data () {
    return {
      // 存一个全部演出的数据
      store: [],
      // 剧目加载mask
      loadingMask: false,
      // 需要搜索的数据
      search: '',
      // 添加剧目对话框显示标识符
      addShowVisible: false,
      // 剧目详情对话框显示标识符
      showInfoVisible: false,
      // 当前点击的剧目信息
      currentshowinfo: {},
      // 分页部分数据
      // 分页展示数据
      paginationshowinfo: [],
      // 每页可以展示的数据内容
      currentpagesize: 15,
      // 当前页面
      currentPage: 1,
      // 分页数据总长度
      showlength: 0,
      // mark标志数组
      markarr: ['', 'info', 'success'],
      // search标志位
      issearch: false
    }
  },
  computed: {
    showmark (date) {
      return function (date) {
        let now = new Date()
        let day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate()
        let mon = now.getMonth() < 9 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1
        let year = now.getFullYear()
        let currentday = `${year}-${mon}-${day}`
        if (date > currentday) {
          return {
            text: '尚未演出',
            mark: 0
          }
        } else if (date < currentday) {
          return {
            text: '已演出',
            mark: 1
          }
        } else {
          return {
            text: '今日开演',
            mark: 2
          }
        }
      }
    }
  },
  methods: {
    // 获取到所有数据
    getallinfo () {
      // 打开mask
      this.loadingMask = true
      // 在页面初始化的时候就从后端获取到所有的演出数据
      let tstar = this.currentpagesize * (this.currentPage - 1)
      let tend = this.currentpagesize * this.currentPage
      // this.$axios.get('http://localhost:3033/getallshow')
      // getshowinfo(tstar, tend)
      // this.$axios.get('http://localhost:3033/getallshow', {
      //   params: {
      //     star: tstar,
      //     end: tend
      //   }
      // })
      getshowinfo(tstar, tend).then(res => {
        // console.log(res.data)
        if (res.status === 200) {
          // 加载完成后关闭mask
          this.loadingMask = false
          this.paginationshowinfo = res.data.allShows
          this.showlength = res.data.length
          this.store = this.paginationshowinfo
        }
      })
    },
    // 搜索栏数据，在搜索栏change的时候修改
    searchshow () {
      if (this.search !== '') {
        // 打开遮罩
        this.loadingMask = true
        // 在页面初始化的时候就从后端获取到所有的演出数据
        let tstar = this.currentpagesize * (this.currentPage - 1)
        let tend = this.currentpagesize * this.currentPage
        // this.$axios.post('http://localhost:3033/searchshow', {
        //   search: this.search,
        //   star: tstar,
        //   end: tend
        // })
        postsearchshow(this.search, tstar, tend).then(res => {
          console.log(res.data)
          this.paginationshowinfo = res.data.showdata
          this.showlength = res.data.length
          this.store = this.paginationshowinfo
          // 打开遮罩
          this.loadingMask = false
          // 标记已经搜索过了
          this.issearch = true
        })
      } else {
        // 如果搜索框为空就要取消搜索模式，并且重新获取全部数据
        this.issearch = false
        // 重置所有数据
        this.getallinfo()
      }
    },
    // 点击添加剧目按钮
    addshow () {
      this.addShowVisible = true
    },
    // 点击剧目详情按钮
    displayshowinfo (row) {
      console.log(row)
      this.currentshowinfo = row
      this.showInfoVisible = true
    },
    // 关闭添加剧目对话框
    closeAddShowDialog () {
      this.addShowVisible = false
      this.getallinfo()
    },
    // 关闭剧目信息对话框
    closeShowInfoDialog () {
      this.showInfoVisible = false
    },
    // 删除当前选中的剧目
    deleteshow (row) {
      console.log(`删除---${row.showName}`)
    },
    // 分页栏pagesize改变
    pageSizeChange (size) {
      console.log(size)
      this.currentpagesize = size
      if (this.issearch) {
        this.searchshow()
      } else {
        this.getallinfo()
      }
    },
    // currentpage改变的时候
    currentPageChange (num) {
      this.currentPage = num
      if (this.issearch) {
        this.searchshow()
      } else {
        this.getallinfo()
      }
    },
    // 关闭编辑剧目详情对话框
    closeDisplayShowInfoDialog () {
      this.showInfoVisible = false
    },
    // 某个剧目信息更改了之后要重新获取数据
    showchanged () {
      this.getallinfo()
    }
  },
  created () {
    this.getallinfo()
  }
}
</script>

<style lang='stylus' scoped>

</style>
